<template>
  <el-row :gutter="20">
    <el-col :span="vanItem.type == 'tinymce' ? 20 : 10">
      <el-input
        v-if="vanItem.type == 'text'"
        v-model="vanItem.value"
        type="text"
      />
      <el-select
        v-if="vanItem.type == 'select'"
        v-model="vanItem.value"
        placeholder="请选择"
      >
        <el-option
          v-for="item in vanItem.content"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-switch
        v-if="vanItem.type == 'switch'"
        v-model="vanItem.value"
        active-value="1"
        inactive-value="0"
      />
      <VabImage
        v-if="vanItem.type == 'image'"
        :default-list="vanItem.value ? [vanItem.value] : []"
        :maxcount="1"
        @updateImg="updateImg"
      />
      <VabImage
        v-if="vanItem.type == 'images'"
        :default-list="vanItem.value"
        :maxcount="0"
        @updateImg="updateImg"
      />
      <tinymce
        v-if="vanItem.type == 'tinymce'"
        v-model="vanItem.value"
        :height="300"
      />
    </el-col>
    <el-col :span="10">{{ vanItem.tip }}</el-col>
  </el-row>
</template>

<script>
  import Tinymce from '@/extra/Tinymce'
  export default {
    components: {
      Tinymce,
    },
    props: {
      itemData: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        vanItem: {},
      }
    },
    watch: {
      itemData: {
        handler(val) {
          if (val) this.vanItem = val
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true,
      },
    },
    methods: {
      updateImg(data) {
        if (this.vanItem.type == 'image') {
          this.vanItem.value = data[0]
        }
        if (this.vanItem.type == 'images') {
          this.vanItem.value = data
        }
      },
    },
  }
</script>
